<template>
    <div class="edit-form">
        <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="120px">
            <el-form-item label="当前密码" prop="currentPassword">
                <el-input v-model="passwordForm.currentPassword" type="password" placeholder="请输入当前密码"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码"></el-input>
            </el-form-item>

            <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('passwordForm')">提交</el-button>
                <el-button @click="resetForm('passwordForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "UserView",
    data() {
        return {
            passwordForm: {
                currentPassword: '',
                newPassword: '',
                confirmPassword: ''
            },
            rules: {
                currentPassword: [
                    { required: true, message: '请输入当前密码', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请确认新密码', trigger: 'blur' },
                    { validator: this.validateConfirmPassword, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        validateConfirmPassword(rule, value, callback) {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        },
        submitForm(formName) {
            const self = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const requestData = {
                        empId:parseInt(this.$store.state.user.empId),
                        currentPassword: this.passwordForm.currentPassword,
                        newPassword: this.passwordForm.newPassword
                    };
                    if (requestData.currentPassword === requestData.newPassword){
                        self.$message({
                            type: 'error',
                            message: '新旧密码不能相同'
                        })
                        return ;
                    }
                    self.$http.post('editPassword', requestData).then(res => {
                        if (res.data) {
                            self.$message({
                                type: 'success',
                                message: '重置密码成功'
                            })
                            self.logout()

                        } else {
                            self.$message({
                                type: 'error',
                                message: '修改失败,请检查密码是否输入正确'
                            })
                        }
                    }).catch(() => {
                        self.$message.error('请求修改失败')
                    })

                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        logout() {
            // 清空session
            sessionStorage.clear()
            // 回登录页
            this.$router.push('/')
        },
    }
};
</script>

<style scoped>
.edit-form{
    height: 630px;
}
</style>
